<template>
  <div id="chargesDetails">
    <top-bar :title="title" v-show="IsTopbar"></top-bar>
    <div class="charges_box">
      <div class="charges_list">
        <p class="charges_list_one">
          顺风车费
          <span>{{ orderMoneyTotal }}元</span>
        </p>
        <p class="charges_list_two" v-if="orderType == '1'">
          拼车 {{ passengerCount }}人
        </p>
        <p class="charges_list_two" v-else>独享</p>
      </div>
      <div class="charges_list">
        <p class="charges_list_one">
          平台服务费
          <span>{{ seviceMoney }}元</span>
        </p>
      </div>
      <p class="chargesAmt">合计：{{ payAmt }}元</p>
      <p class="hx"></p>
      <div>
        <p class="estimateAmt">
          实际支付
          <span>{{ payAmt }}元</span>
        </p>
      </div>
      <p class="faremin">*车费计算四舍五入取小数点后两位</p>
      <p class="seeValuationRules" @click="ValuationRulesBtn">查看计价规则</p>
    </div>
  </div>
</template>
<script>
import {
  Tabs,
  Icon,
  Field,
  InputItem,
  Toast,
  Popup,
  PopupTitleBar,
  Dialog
} from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Utils from '@/common/pakjUtils';
import http from '@/common/phoneOrderHttp';
var CryptoJS = require('crypto-js');
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [InputItem.name]: InputItem
  },
  data() {
    return {
      rulesPop: false,
      title: '费用明细',
      orderMoneyTotal: '0.00', // 订单费用
      payAmt: '0.00', // 实际支付金额
      IsTopbar: true,
      orderType: '', // 订单类型
      passengerCount: '', // 订单人数
      seviceMoney: '0.00' // 服务费
    };
  },
  mounted() {
    if (Utils.isApp()) {
      // 判断当前环境是否在app
      this.IsTopbar = false;
    }
    if (this.$route.query.orderno) {
      let params = {
        orderNo: this.$route.query.orderno
      };
      Loading.show();
      http.post('/pakj/allotDriver/toShowGetDetail', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          this.orderMoneyTotal = res.data.data.orderMoneyTotal;
          this.seviceMoney = res.data.data.seviceMoney;
          this.payAmt = res.data.data.driverGetMoney;
          this.orderType = res.data.data.orderType;
          this.passengerCount = res.data.data.passengerCount;
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    } else {
      Dialog.alert({
        title: '提示',
        content: '获取不到订单号',
        confirmText: '确定'
      });
    }
  },
  methods: {
    ValuationRulesBtn() {
      this.$router.push({
        name: 'hitchhikeValuationRules',
        query: {
          orderno: this.$route.query.orderno
        }
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
p, h5, h6 {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#chargesDetails {
}

.charges_hd {
  background-color: #fff;
  padding-top: 40px;
}

.charges_hd h6 {
  text-align: center;
  font-size: 36px;
  color: #333;
  padding-bottom: 10px;
  font-weight: 400;
}

.charges_hd p {
  text-align: center;
  font-size: 24px;
  color: #999;
  padding-bottom: 40px;
}

.charges_hd h5 {
  font-size: 24px;
  color: #999;
  padding: 0px 82px 40px 82px;
  font-weight: 400;
}

.charges_box {
  background-color: #fff;
  padding: 0px 82px 40px 82px;
}

.hx {
  height: 1px;
  background-color: #ccc;
  padding: 0px 82px 0px 82px;
  margin-top: 20px;
}

.charges_list {
  padding-top: 24px;
}

.charges_list_one {
  font-size: 28px;
  color: #666;
}

.charges_list_one span {
  float: right;
}

.charges_list_two {
  font-size: 22px;
  color: #999;
  margin-top: 10px;
}

.charges_list_two span {
  float: right;
}

.chargesAmt {
  padding-top: 40px;
  font-size: 28px;
  color: #333;
  text-align: right;
}

.charges_coupon {
  font-size: 28px;
  padding-top: 40px;
  color: #FF6917;
}

.charges_coupon span {
  float: right;
}

.estimateAmt {
  font-size: 28px;
  padding-top: 80px;
  color: #666;
  text-align: right;
}

.estimateAmt span {
  font-size: 40px;
}

.faremin {
  font-size: 22px;
  padding-top: 4px;
  color: #999;
  text-align: right;
}

.seeValuationRules {
  width: 260px;
  height: 88px;
  border-radius: 6px;
  border: 1px solid #E0E0E0;
  line-height: 88px;
  margin: 108px auto 0px auto;
  text-align: center;
  font-size: 30px;
  color: #666;
}

.rules_ct {
  background-color: #fff;
  height: 91.8vh;
}
</style>
